import { FunctionalComponent as FC, inject, onMounted, type Ref } from "vue"
import { useRoleStore } from "@/store"
import LabelItem from "../LabelItem"
import LabelItem1 from "../LabelItem/index1"
// import useUtils from "../../hooks/useUtils"
import { switchData } from "../../utils"
import type { CommonTypeItem } from "@/store/modules/role/types"

import "./index.less"
interface Prop {
}
interface DialogInject {
  addRoleForm: Ref<{name: string, description: string, permIds: number[]}>
  checkall: Ref<boolean>
  indeterminate: Ref<boolean>
  setCheckVal: (val: boolean) => void
  setIndetVal: (val: boolean) => void
}
const RoleSetting: FC<Prop, any> = (props, ctx) => {
  const roleStore = useRoleStore()
  // const UtilsHooks = useUtils()
  const dialogState = inject<DialogInject>("dialogState")
  const handleClick = (item: CommonTypeItem) => {
    item.isVisibile = !item.isVisibile
  }
  const handleChange = (val: boolean, item: CommonTypeItem) => {
    dialogState && switchData(val, item, dialogState)
    // if (dialogState) {
    //   item.level === 1 && UtilsHooks.switchFirstLevel(val, item, dialogState)
    // }
  }
  // 模块数据渲染
  // return roleStore.allDataConfig.map(item => {})
  return Object.values(roleStore.moduleArr).map(labelItem => (
    <div class="label-item-container" key={labelItem.code}>
      <div class="label-item">
        <div class="label-box">
          <div class="label-left">
            <a-checkbox
              v-model={labelItem.checked}
              indeterminate={labelItem.indeterminate}
              value={labelItem.id}
              onChange={(val) => handleChange(val, labelItem)}
            >{labelItem.label}</a-checkbox>
          </div>
          <div class="label-right" onClick={() => handleClick(labelItem)}>{labelItem.isVisibile ? "收起" : "展开"}</div>
        </div>
        {/* {labelItem.isVisibile && <LabelItem code={labelItem.code} />} */}
        {labelItem.isVisibile && <LabelItem1 item={labelItem} />}
      </div>
    </div>
  ))
}

export default RoleSetting